{extend name="../layout/inline_page_base"/}

{block name="body"}
<div class="layui-row" id="apps-info">
    <div class="layui-col-xs2 pd">
        <div class="apps-info-logo">
            <img src="{$info.logo}" style="width: 100%;" />
        </div>
    </div>
    <div class="layui-col-xs10 pd">
        <div class="layui-row">
            <div class="layui-col-xs9">
                <span class="apps-info-title">{$info.title}
                    <span class="layui-badge layui-bg-blue">{$info.price>0 ? ('￥' . $info.price) : '免费'}</span>
                </span>
                <div class="apps-info-desc">
                    <p>版本：{$info.version}</p>
                    <p>作者：{$info.author}，分类：{:implode('|', explode(',', $info['cates']))}</p>
                    <p>发布时间：{$info.create_time|date="Y-m-d"}，更新时间：{$info.update_time|date="Y-m-d"}</p>
                    <p>
                        {foreach $info.type as $k => $v}
                        {if isset($types[$v])}
                        <span class="layui-badge layui-bg-orange">{$types[$v]}</span>
                        {/if}
                        {/foreach}
                    </p>
                    <div class="install-btn">
                        <button onclick="downloadApp('{$info.id}')" class="layui-btn layui-btn-sm">
                            <i class="layui-icon">&#xe601;</i>立即下载
                        </button>
                    </div>
                </div>
            </div>
            <div class="layui-col-xs3 preview-qrcode tc">
                {if $info.demo_qrcode != ''}
                <img style="width: 120px;margin: 0 auto 5px;" src="{$info.demo_qrcode}">
                <p class="apps-info-preview_text">扫码预览</p>
                {/if}
            </div>
        </div>
    </div>
</div>
<hr>
<div style="padding: 0px 10px;">
    小提示
    <hr>
    <blockquote style="border-left:5px solid  #ea6e0c;" class="layui-elem-quote">{$info.warning|raw}</blockquote>
    应用简介
    <hr>
    <blockquote class="layui-elem-quote">{$info.desc|raw}</blockquote>
    <div class="layui-tab layui-tab-card">
        <ul class="layui-tab-title">
            <li class="layui-this">应用详情</li>
            <li>升级日志</li>
        </ul>
        <div class="layui-tab-content" style="height: auto;">
            <div class="layui-tab-item layui-show">
                <div class="apps-info-content">
                    {$info.detail|raw}
                </div>
            </div>
            <div class="layui-tab-item">
                <ul class="layui-timeline">
                    {volist name="upgrade_list" id="v"}
                    <li class="layui-timeline-item">
                        <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
                        <div class="layui-timeline-content layui-text">
                            <h3 class="layui-timeline-title">V{$v.version}({$v.create_time|date="Y-m-d H:i"})</h3>
                            <div>{$v.desc|raw}</div>
                        </div>
                    </li>
                    {/volist}
                </ul>
            </div>
        </div>
    </div>
    <br>
    <br>
</div>
{/block}

{block name="js"}
<script>
    var layer, form, element;

    layui.use(['layer','form','element'], function() {
        element = layui.element;
        layer = layui.layer;
        form = layui.form;
    });

    /**
     * 下载应用
     * @param id
     * @returns {boolean}
     */
    function downloadApp(id) {
        var isLogin = parseInt("{$token ? 1 : 0}");
        if(! isLogin){
            layer.msg('请先登录', {time:1500}, function () {
                parent.location.href = "{:url('login')}";
            });
            return false;
        }

        var tip = '{if($info.price>0)}你确定付费{$info.price}元下载使用此应用吗？{else /}此应用是免费的，你确定要下载使用吗？{/if}';
        layer.confirm(tip, {
            btn: ['是的','不的']
        }, function(){
            var userInfo = {:json_encode($user)}
                ,appInfo = {:json_encode($info)};
            if(userInfo.money < appInfo.price){
                layer.alert('余额不足，请先充值！');
                return;
            }
            var index = layer.load(1);
            $.post("{:url('download')}", {app_id:id}, function (res) {
                layer.close(index);
                if(res.code === 1){
                    layer.msg(res.msg, {time:3000}, function () {
                        parent.location.href = res.url;
                    });
                }else{
                    layer.alert(res.msg);
                }
            }).error(function (error) {
                layer.close(index);
                layer.alert('500 Internal Server Error');
            })
        }, function(){});
        return false;
    }
</script>
{/block}
{block name="css"}
<style>
    #apps-info .pd{padding: 10px 0px 0px 10px;}
    .apps-info-title{font-size: 22px;}
    .apps-info-title span{ margin-left:5px;font-size: 12px;bottom: 3px;}
    .apps-info-desc{font-size: 12px;color: #787878;}
    .preview-qrcode{text-align: center;}
    .preview-qrcode img{margin-top: -19px;}
    .apps-info-preview_text {text-align: center; top: -5px;position: relative;}
    .install-btn{margin-top: 5px;}

    .layui-tab-content img{max-width: 100% !important;}
</style>
{/block}